<script lang="ts" setup>
import { APP_CONFIG } from '~/config'

const router = useRouter()
const route = useRoute()

const menuOptions = inject('menu') as any[]

const activeKey = computed(() => route.query.categoryId || menuOptions[0].categoryId)

const switchTo = (item: any) => {
  if (item.categoryName === '首页') {
    window.open(window.location.origin)
  } else if (item.categoryId === '1958042139442155522') {
    window.open(item.linkUrl, '_blank')
  } else {
    window.open(`${window.location.origin}/news?categoryId=${item.categoryId}`)
  }
}

// 搜索的内容
const options = ref([])
const selectId = ref(undefined)

const { data } = await useAsyncData('search-options', () => useApiFetch(`/app/articleCategory/pagearticleSearch?searchValue=${''}&pageSize=20&pageNum=1`))

options.value = data.value?.data?.rows || [];

const handleSearch = async(query: string) => {
  const { data:searchData } = await useAsyncData('search-options', () => useApiFetch(`/app/articleCategory/pagearticleSearch?searchValue=${query}&pageSize=20&pageNum=1`))
  options.value = searchData.value?.data?.rows || [];
}

const handleSelect = (val: string, opt: Record<string, any>) => {
  router.push(`/news/${val}?categoryId=${opt.parentCategoryId}&currentCategoryId=${opt.categoryId}`)
}
</script>

<template>
  <header>
    <div class="header-container">
      <div class="w-[1200px] flex justify-between items-center mx-auto">
        <img :src="APP_CONFIG.logo" alt="logo">
        <div class="flex items-center">
          <img src="http://jmrh.dumi.info/templates/main/images/ico_phone.png" alt="">
          <img class="mx-2" :src="APP_CONFIG.phone" alt="phone">
          <n-select class="!w-[300px]" placeholder="站内搜索" size="small" v-model:value="selectId" :options="options"
            label-field="title" value-field="id" filterable @search="handleSearch" remote @update:value="handleSelect">
            <template #suffix>
              <UnoIcon class="i-carbon:search" />
            </template>
          </n-select>
        </div>
      </div>
      <nav class="menu w-[1200px] mx-auto mt-[15px]">
        <div v-for="item in menuOptions" :key="item.categoryId" class="menu-item"
          :class="{ on: activeKey === item.categoryId }">
          <span class="atop" @click="switchTo(item)">{{ item.categoryName }}</span>
          <ol v-if="item.children && item.children.length > 0">
            <li v-for="child in item.children" :key="child.categoryId">
              <NuxtLink target="_blank" :to="`/news?categoryId=${item.categoryId}&childCategoryId=${child.categoryId}`">{{
                child.categoryName
              }}</NuxtLink>
            </li>
          </ol>
        </div>
      </nav>
    </div>
    <!-- 占位 -->
    <div class="h-[102px] w-full bg-[#EBEBEB]" />
  </header>
</template>

<style scoped>
.header-container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 162px;
  padding-top: 12px;
  background: url('http://jmrh.dumi.info/templates/main/images/bg_top.png') no-repeat center;
  background-size: auto 100%;
}

.menu .menu-item {
  font-family: 'Microsoft YaHei';
  position: relative;
  display: inline-block;
  padding: 0 13px 20px;
  background: url(http://jmrh.dumi.info/templates/main/images//line.png) no-repeat right 5px;
}

.menu .menu-item:last-child {
  background: none;
}

.menu .menu-item .atop {
  display: inline-block;
  height: 32.5px;
  line-height: 32.5px;
  padding: 0 20px;
  border-radius: 32px;
  text-align: center;
  font-size: 18px;
  color: #000;
  cursor: pointer;
}

.menu .menu-item .atop em {
  display: inline-block;
  width: 12px;
  height: 15px;
}

.menu .menu-item:hover .atop,
.menu .menu-item.on .atop {
  background: url(http://jmrh.dumi.info/templates/main/images/btn_bg.png) no-repeat center;
  background-size: 100% 100%;
  color: #fff;
}

.menu .menu-item ol {
  position: absolute;
  z-index: 2;
  top: 45px;
  left: 3.5%;
  width: 93%;
  padding: 5px 15px;
  border-radius: 20px;
  box-sizing: border-box;
  background: #fafafa;
  box-shadow: inset 0 0 20px rgba(243, 217, 217, .3), 0 0 5px 1px #d9d9d9;
  transform-origin: top center;
  transform: scale(0, 0);
  transition: all .2s;
  text-align: center;
}

.menu .menu-item:hover ol {
  transform: scale(1, 1);
}

.menu .menu-item ol:after {
  position: absolute;
  content: "";
  top: -13px;
  left: 50%;
  margin-left: -10px;
  width: 20px;
  height: 13px;
  background: url(http://jmrh.dumi.info/templates/main/images/arrTop.png);
}

.menu .menu-item ol a {
  display: block;
  line-height: 32px;
  border-bottom: 1px solid #d9d9d9;
  font-size: 14px;
  color: #666;
  cursor: pointer;
}

.menu .menu-item ol li:last-child a {
  border-bottom: none;
}

.menu .menu-item ol a:hover {
  color: #c00;
}
</style>
